<template>
  <article>
    <el-form ref="formdata" :inline="true" :model="formdata" class="demo-form-inline" label-position="left">
      <el-form-item label="项目">
        <el-select v-model="formdata.project" clearable
                   filterable
                   placeholder="请选择">
          <el-option
            v-for="item in gameList"
            :key="item.project"
            :label="item.project_name"
            :value="item.project">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query" icon="el-icon-search">查询</el-button>
        <el-button type="success" @click="add" el-icon-circle-plus-outline icon="el-icon-circle-plus-outline">新增</el-button>
      </el-form-item>
    </el-form>

  <el-table :data="kpiList" border show-summary style="width: 100%;"   :header-cell-style="{backgroundColor:theme.bgcolor,color:theme.activeColor}" >
    <el-table-column align="center" type="index"/>
    <el-table-column align="center" prop="name" sortable label="产品"/>
    <el-table-column align="center" prop="date" sortable label="月份" />
    <el-table-column align="center" prop="kpiMonth" sortable label="kpi设定"/>
    <el-table-column align="center" prop="operation" fixed="right" label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <el-dialog :visible="dialogFormVisible" :close-on-click-modal="false" @close="close" :close-on-press-escape="false"
               :modal-append-to-body="false" :title="title" :show-close="false">
      <el-form :model="form" :rules="rules" ref="form" label-position="left" class="demo-form-inline" style="margin-left: 30%"  label-width="120px">
        <input type="hidden" v-model="form.id"/>
        <el-form-item label="项目" prop="project">
          <el-select v-model="form.project" style="width: 200px" :disabled="isDisable"
                     filterable
                     placeholder="请选择">
            <el-option
              v-for="item in gameList"
              :key="item.project"
              :label="item.project_name"
              :value="item.project+'$%'+item.project_name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="月份" prop="dateMonth" >
          <el-date-picker :disabled="isDisable" value-format="yyyy-MM"
            v-model="form.dateMonth"
            type="month"
            placeholder="选择月份">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="月流水目标"  prop="recharge_month">
          <el-input-number v-model="form.recharge_month" :step="100" :min="100" style="width: 200px"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </article>
</template>

<script>
  import {mapState,mapActions} from 'vuex';
    export default {
        name: "kpi",
      data(){
          return {
            formdata: {},
            dialogFormVisible: false,
            form: {
              id:'',
              project: '',
              dateMonth:'',
              recharge_month: 0
            },
            oldVal:0,
            type:1,//1表示新增，其他表示修改
            modal:false,
            formLabelWidth: '120px',
            rules: {
              project: [
                { required: true, message: '请选择项目', trigger: 'change' }
              ],
              dateMonth: [
                {required: true, message: '请选择月份', trigger: 'change' }
              ]
            }
          }
        },
      mounted(){
        this.fetchData();
      },
      computed:{
          title(){
            return this.type===1?"新增KPI月流水":"修改KPI月流水";
          },
        isDisable(){
          return this.type!==1;
        },
        ...mapState( {
          theme: state => state.app.theme,
          gameList: state => state.app.gameList,
          kpiList : state => state.kpi.tableData
        })
      },
      methods : {
        ...mapActions([
          'kpi_setTableData','kpi_getTableData','kpi_updateData','kpi_delData'
        ]),
        fetchData : function () {
          this.kpi_getTableData();
        },
        query: function () {
          let param = {};
          param.project = this.formdata.project;
          console.log(param);
          this.kpi_getTableData(param);
        },
        close :function () {
          this.form= {
            id:'',
            project: '',
              dateMonth:'',
              recharge_month: 0
          },
          this.$refs['form'].resetFields();
        },
        submit: function () {
          let obj = {};
          this.$refs['form'].validate((valid) => {
            if(valid){
              let values = this.form.project.split("$%");
              obj.name = values[1];
              obj.project = values[0];
              obj.kpiMonth = this.form.recharge_month;
              obj.date = this.form.dateMonth;
              obj.id = this.form.id;
              if(this.type===2){
                obj.recharge_month===this.oldVal?this.$message({
                  message: `月流水目标的值未改变，不需要提交！`,
                  center: true,
                  type:'error'
                }):this.kpi_updateData(obj).then(this.kpi_getTableData);

              }
              if(this.type===1){
                this.kpiList.find((item)=>item.project===obj.project&&item.date===obj.date)?this.$message({
                  message: `${obj.name}的${obj.date}月份的月流水目标已经存在！`,
                  center: true,
                  type:'error'
                }):this.kpi_setTableData(obj).then(this.kpi_getTableData);
              }
              this.dialogFormVisible = false;
            }else {
              console.log('error submit!!');
              return false;
            }
          });

        },
        add:function () {
          this.type = 1;
          this.dialogFormVisible = true;

        },
        handleEdit: function (index, rows) {
          this.form.id = rows.id;
          this.form.project = rows.project+"$%"+rows.name;
          this.form.recharge_month = rows.kpiMonth;
          this.form.dateMonth = rows.date;
          this.type = 2;
          this.oldVal = rows.kpiMonth;
          this.dialogFormVisible = true;
        },
        handleDelete: function (index, rows) {
          let obj = {};
          this.$confirm('此操作将删除该条记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            obj.id = rows.id;
            this.kpi_delData(obj).then(this.kpi_getTableData);
          }).catch((error)=>{
            console.log(error);
          });
        }
      }
    }
</script>

<style scoped>

</style>
